<template>
	<transition name='fade'>
	    <div class="box">
		    <header class="header">
		        <div class="header-button">
		          <router-link to="/city" tag="label">
		            {{city}}
		          </router-link>
		        </div>
		        <router-link to="/search" tag='h1' class="header-title">搜索</router-link>
		        <div class="header-button">消息</div>
		    </header>
		    <mt-swipe :auto="4000"><!--轮播图--> 
				<mt-swipe-item v-for='(item,index) of bannerlist' :key='index'>
				  <img :src="item.logo" class="swip"/>
				</mt-swipe-item>
			</mt-swipe>
	        <div class="content">
	            <Prolist :prolist = 'prolist'/><!--调用子组件（Prolist）并向子组件传值（由于所传的值为变量要用：进行绑定）-->
	        </div>
	    </div>
	</transition>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
import axios from 'axios'
Vue.use(Swipe, SwipeItem)
import Prolist from '@/components/Recommend/Prolist'
export default {
data () {
	return {
      bannerlist: [],
      prolist: [],
      city: '北京'
    }
  },
  components: {
    Prolist
  },
  created () {
  axios.get('/daxun/index',{
  	headers:{'token':sessionStorage.getItem('tokenKey')}
  }).then(res => {
  	     console.log(res.data.data)
         this.bannerlist = res.data.data
         this.prolist = res.data.data
//      bannerData.data.map(item => {
//        prolist.push('/daxun/' + item)
//      })
//      this.bannerlist = prolist
//      this.prolist = proData.data
      })
// fetch('/daxun/showAllImgs',{
//  method:'POST',
//  headers: {
//    'Accept': 'application/json',
//    'Content-Type': 'application/json',
//    'token':sessionStorage.getItem('tokenKey')
//     }
//	 }).then(resq => resq.json())
//	    .then(resq => {
//	        console.log(resq)
//	    })
	   if(sessionStorage.getItem('city')) {
	  		this.city = sessionStorage.getItem('city')
	    }
  },
  methods: {
    getBannerList () {
      return axios.get('/daxun/banner')
    },
    getProlist () {
      return axios.get('/daxun/douban')
    }
  }
}
</script>
<style lang="scss" scoped>
.mint-swipe {
  width: 96%;
  height: 160px;
  margin:5px auto;
  img {
    width: 100%;
  }
}
.mint-search{
    width:50%;
    margin: 0 auto;
}
.mint-searchbar{
    background-color:#fff ;
}
.mint-searchbar-inner{
    border:1px solid #ccc;
    border-radius: 10px;
}
</style>
